<script setup>
import menu1 from '../assets/images/menu1.png'
import menu2 from '../assets/images/menu2.png'
import menu3 from '../assets/images/menu3.png'
import menu4 from '../assets/images/menu4.png'
import menu5 from '../assets/images/menu5.png'
import menu6 from '../assets/images/menu6.png'
import menu7 from '../assets/images/menu7.png'
import menu8 from '../assets/images/menu8.png'
import menu9 from '../assets/images/menu9.png'
import menu10 from '../assets/images/menu10.png'

const menuList = [
    {text:'所以分类', url: menu1},
    {text:'我的订单', url: menu2},
    {text:'其他类', url: menu3},
    {text:'图纸类', url: menu4},
    {text:'名片类', url: menu5},
    {text:'书册类', url: menu6},
    {text:'广告类', url: menu7},
    {text:'单页类', url: menu8},
    {text:'购物车', url: menu9},
    {text:'客服', url: menu10},
]

</script>

<template>
 <div class="home-grid">
    <van-grid square :column-num="5">
      <van-grid-item
         v-for="list in menuList"
          :key="list"
      >
          <van-image :src="list.url" />
          <span>{{ list.text }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<style lang="scss" scoped>
.home-grid{
   .van-image{
     width: 55%;

   }
   span{
    margin-top: 5px;
    font-size: 12px;
   }


}
</style>